<script setup>
import { useRoute,useRouter } from 'vue-router';
import { ElMessage,ElMessageBox,ElLoading  } from 'element-plus';
import { addCoupons } from '@/api/Marketing/coupon.js'
import { closeTag } from '@/utils/globalWay'
import SelectStote from './Components/SelectStote.vue';
import SelectRange from './Components/SelectRange.vue';
import ImportMember from './Components/ImportGoods.vue';
import TopBar from '@/components/Topbar/index.vue';
import getRules from "@/validUtils";
import Big from 'big.js';
import { uniqueFunc,limitFloat,limitInt,giveFloatMin,giveIntMin } from '@/utils/common.js';
const route = useRoute();
const router = useRouter();
const instance = getCurrentInstance();
const topbarRef = ref(null);
const stepBarList = ['基本信息', '活动规则'];
const backValue = ref('CouponOrganizeIndex');
const tabName = ref("新增优惠券");
const activeStep = ref(0)
const keepLoading = ref(false);
const formRef = ref(null);
const selectStoteRef = ref(null);
const importMemberRef = ref(null);
const selectRangeRef = ref(null);
const activityRef = ref(null);
const storeList = ref([]);
const groupType = ref("疗程")
const form = ref({
    name:"",
    remark:"",
    sendNum:"",
    price:"",
    useThreshold:0,
    reachPrice:"",
    useTime:0,
    useTimeValue:["",""],
    useDay:"",
    useStore:0,
    needValue:"1",
    storeList:[]
})

const oldUseStore = ref(1);
const storeType = ref(1);
const activityForm = ref({
    rangeType:0,
    cureList:[],
    comboList:[],
    projectList:[],
    productList:[]
})
const activityRules = ref({

})
const rules = ref({
    reachPrice:[
        { validator: (rule, value, callback) => {
                if (form.value.useThreshold == 1) {
                    if((form.value.reachPrice??'') === ''){
                        return callback(new Error("请输入门槛金额"));
                    }else{
                        return callback();
                    }
                }
                return callback();
            }, trigger: "blur"
        },
    ],
    useTimeValue:[
        { validator: (rule, value, callback) => {
                if (form.value.useTime == 0) {
                    if((form.value.useTimeValue??'') === ''){
                        return callback(new Error("请选择指定时间"));
                    }
                    if(((form.value.useTimeValue[0]??'') === '') || ((form.value.useTimeValue[1]??'') === '')){
                        return callback(new Error("请选择指定时间"));
                    }else{
                        return callback();
                    }
                }
                return callback();
            }, trigger: "change"
        },
    ],
    useDay:[
        { validator: (rule, value, callback) => {
                if (form.value.useTime == 1) {
                    if((form.value.useDay??'') === ''){
                        return callback(new Error("请输入天数"));
                    }else{
                        return callback();
                    }
                }
                return callback();
            }, trigger: "blur"
        },
    ],
})
const shortcuts = ref([
  {
    text: 'Today',
    value: new Date(),
  },
]);
const disabledDate = (time)=>{
    return new Date().getTime()-1*24*3600*1000 > time.getTime();
}
const changeUseThreshold = ()=>{
    // form.value.reachPrice = "";
    // formRef.value.clearValidate(['reachPrice']);
}
const changeUseTime = ()=>{
    form.value.useTimeValue = "";
    form.value.useDay = "";
    formRef.value.clearValidate(['useTimeValue']);
    formRef.value.clearValidate(['useDay']);
}
const clearRange = ()=>{
    activityForm.value.cureList = [];
    activityForm.value.comboList = [];
    activityForm.value.projectList = [];
    activityForm.value.productList = [];
    _getRangeList(1);
}
const changeUseStore = ()=>{
    if(form.value.storeList.length<=0){
        oldUseStore.value = JSON.parse(JSON.stringify(form.value.useStore));
        return;
    }
    let rangeList = [
        ...activityForm.value.cureList,
        ...activityForm.value.comboList,
        ...activityForm.value.projectList,
        ...activityForm.value.productList
    ]
    if(rangeList.length<=0){
        form.value.storeList = [];
        _getStoreLsit(1);
    }else{
        let onlyShop = true;
        let nowStoreType = 1;
        form.value.storeList.forEach(lis=>{
            if(lis.isHall){
                onlyShop = false;
            }
        })
        if(onlyShop){
            nowStoreType = 2;
        }else{
            nowStoreType = 1;
        }
        if(storeType.value != nowStoreType){
            ElMessageBox(
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error',
                    title: '提示',
                    showCancelButton: true,
                    confirmButtonClass: 'delete',
                    message:"提交后降清空活动范围，是否继续？",
                    beforeClose: async (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true; 
                            instance.confirmButtonText = 'Loading...';
                            clearRange()
                            form.value.storeList = [];
                            oldUseStore.value = JSON.parse(JSON.stringify(form.value.useStore));
                            storeType.value = JSON.parse(JSON.stringify(nowStoreType));
                            _getStoreLsit(1);
                            instance.confirmButtonLoading = false;
                            done();
                            
                        } else {
                            form.value.useStore = oldUseStore.value;
                            done()
                        }
                    },
                }
            )
        }else{
            form.value.storeList = [];
            clearRange()
            oldUseStore.value = JSON.parse(JSON.stringify(form.value.useStore));
            storeType.value = JSON.parse(JSON.stringify(nowStoreType));
            _getStoreLsit(1);
        }
    }
    

}
const stepChange = (index) => {
//   activeStep.value = index
}
const cancel = () => {
    topbarRef.value.backHandle()
}
const nextHandle = ()=>{
    if(activeStep.value == 0){
        formRef.value.validate((validOne, fields,msg)=>{
            if(validOne){
                if(form.value.useStore == 1){
                    if(form.value.storeList.length<=0){
                        ElMessage.error('请选择门店！');
                        return;
                    }
                }
                activeStep.value++;
            }
        })
    }

    
    if(activeStep.value >= 1){
        activityRef.value.validate((validTwo, fields,msg)=>{
            if(validTwo){
                if(activityForm.value.rangeType == 1 || activityForm.value.rangeType == 2){
                    let rangeList = [
                        ...activityForm.value.cureList,
                        ...activityForm.value.comboList,
                        ...activityForm.value.projectList,
                        ...activityForm.value.productList
                    ]
                    if(rangeList.length<=0){
                        ElMessage.error('请选择商品！');
                        return;
                    }
                }
                submit();
            }
        })

    }
}
const prevHandle = ()=>{
    activeStep.value --;
}
const storePageConfig = ref({
    nowPage:1,
    pageSize:3,
    totalPage:0
})
const backStoreValue = (arr)=>{
    let rangeList = [
        ...activityForm.value.cureList,
        ...activityForm.value.comboList,
        ...activityForm.value.projectList,
        ...activityForm.value.productList
    ]

    let onlyShop = true;
    let nowStoreType = 1;
    arr.forEach(lis=>{
        if(lis.isHall){
            onlyShop = false;
        }
    })
    if(onlyShop){
        nowStoreType = 2;
    }else{
        nowStoreType = 1;
    }
    if(rangeList.length<=0 || form.value.storeList.length<=0){
        storeType.value = JSON.parse(JSON.stringify(nowStoreType));
        form.value.storeList = arr;
        _getStoreLsit(1);
        return;
    }
    if(storeType.value != nowStoreType){
        ElMessageBox(
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error',
                title: '提示',
                showCancelButton: true,
                confirmButtonClass: 'delete',
                message:"提交后降清空活动范围，是否继续？",
                beforeClose: async (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = 'Loading...';
                        clearRange();
                        form.value.storeList = arr;

                        storeType.value = JSON.parse(JSON.stringify(nowStoreType));
                        _getStoreLsit(1);
                        instance.confirmButtonLoading = false;
                        done();
                    } else {
                        done()
                    }
                },
            }
        )
    }else{
        form.value.storeList = arr;

        storeType.value = JSON.parse(JSON.stringify(nowStoreType));
        _getStoreLsit(1);
    }
}
const _getStoreLsit = async (page)=>{
    storePageConfig.value.nowPage = page;
    let parmas = {
        page:storePageConfig.value.nowPage,
        pageSize:storePageConfig.value.pageSize,
    }
    let result = await getLimitData(parmas,form.value.storeList);
    result =  JSON.parse(result);
    storeList.value = result.data
    storePageConfig.value.totalPage = Number(result.totalPage);
}
const openStore = ()=>{

    selectStoteRef.value.openModal(form.value.storeList);
}
//获取分页后的数据
const getLimitData = (params,arr=[]) =>{
    const self = this;
    return new Promise((resolve,reject)=>{
        let returnData = JSON.parse(JSON.stringify(arr));
        params.page = params.page-1;
        let atPage = params.page * params.pageSize;
        returnData = returnData.splice(atPage,params.pageSize);
        resolve(JSON.stringify({
            data:returnData,
            totalPage:arr.length
        }));
    })
};
const delStore = (id)=>{
    // const oldBrandList = JSON.parse(JSON.stringify(storeList.value))
    // const oldStoreList = JSON.parse(JSON.stringify(form.value.storeList))
    // const indexs = oldStoreList.findIndex(item => item.id === id)
    // oldStoreList.splice(indexs,1);
    // const oldBrand = oldBrandList.map(v=>v.brandId).filter(s=>s)
    // const oldBrandStore = oldStoreList.map(v=>v.brandId).filter(s=>s)
    // const isflag = (oldBrand?.length > oldBrandStore?.length) && rangeList.value?.length
    ElMessageBox(
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
            title: '提示',
            showCancelButton: true,
            confirmButtonClass: 'delete',
            message:  "确定要删除该门店吗?", // '检测到经营范围发生，提交后将清空活动商品，是否继续？',
            beforeClose: async (action, instance, done) => {
                if (action === 'confirm') {
                    instance.confirmButtonLoading = true
                    instance.confirmButtonText = 'Loading...'
                    try {
                        let index = form.value.storeList.findIndex(item => item.id === id)
                        form.value.storeList.splice(index,1);
                        ElMessage.success('删除成功');
                        // if(isflag){
                        //     rangeList.value = []
                        // }
                        _getStoreLsit(1);
                    } catch (error) {
                        ElMessage.error('删除失败');
                    }finally{

                        instance.confirmButtonLoading = false
                        done()
                    }
                    
                } else {
                    done()
                }
            },
        }
    )
}
const changeRange = (value)=>{

}
const groupTypeChange = ()=>{
    _getRangeList(1);
}
const openRangeList = ()=>{
    let businessBrandId = form.value.storeList.filter(v=>v.brandId).map(value=>value.brandId).join(',');
    selectRangeRef.value.openRange(
        groupType.value,
        activityForm.value.cureList,
        activityForm.value.comboList,
        activityForm.value.projectList,
        activityForm.value.productList,
        businessBrandId
    );
}

const backRangeValue = (groupTypeInfo,cureList,comboList,projectList,productList)=>{
    groupType.value = groupTypeInfo;
    activityForm.value.cureList = cureList;
    activityForm.value.comboList = comboList;
    activityForm.value.projectList = projectList;
    activityForm.value.productList = productList;
    _getRangeList(1);
}
const rangePageConfig = ref({
    nowPage:1,
    pageSize:5,
    totalPage:0
})
const rangeList = ref([]);
const _getRangeList = async (page)=>{
    rangePageConfig.value.nowPage = page;
    let parmas = {
        page:rangePageConfig.value.nowPage,
        pageSize:rangePageConfig.value.pageSize,
    }
    let arr = [];
    if(groupType.value == "疗程"){
        arr = activityForm.value.cureList;
    }else if(groupType.value == "套餐"){
        arr = activityForm.value.comboList;
    }else if(groupType.value == "项目"){
        arr = activityForm.value.projectList;
    }else if(groupType.value == "产品"){
        arr = activityForm.value.productList;
    }
    console.log(arr,11)
    let result = await getLimitData(parmas,arr);
    result = JSON.parse(result);
    console.log(result,222);
    rangeList.value = result.data;
    rangePageConfig.value.totalPage = Number(result.totalPage);
}
const delRange = (id)=>{
    let test;

    ElMessageBox(
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
            title: '提示',
            showCancelButton: true,
            confirmButtonClass: 'delete',
            message:`确定要删除该${ groupType.value }吗?`,
            beforeClose: async (action, instance, done) => {
                if (action === 'confirm') {
                    instance.confirmButtonLoading = true
                    instance.confirmButtonText = 'Loading...'
                    try {
                        if(groupType.value == "疗程"){
                            let index = activityForm.value.cureList.findIndex(item => item.id === id)
                            activityForm.value.cureList.splice(index,1);
                        }else if(groupType.value == "套餐"){
                            let index = activityForm.value.comboList.findIndex(item => item.id === id)
                            activityForm.value.comboList.splice(index,1);
                        }else if(groupType.value == "项目"){
                            let index = activityForm.value.projectList.findIndex(item => item.id === id)
                            activityForm.value.projectList.splice(index,1);
                        }else if(groupType.value == "产品"){
                            let index = activityForm.value.productList.findIndex(item => item.id === id)
                            activityForm.value.productList.splice(index,1);
                        }

                        ElMessage.success('删除成功');
                        _getRangeList(1);
                    } catch (error) {
                        ElMessage.error('删除失败');
                    }finally{

                        instance.confirmButtonLoading = false
                        done()
                    }
                    
                } else {
                    done()
                }
            },
        }
    )
}
const backImportRangeValue = (rangeList)=>{
    rangeList.forEach(lis=>{
        if(lis.productType == 7){
            activityForm.value.cureList.push({
                ...lis,
                courseName:lis.name
            })
        }else if(lis.productType == 3){
            activityForm.value.comboList.push({
                ...lis,
                comboName:lis.name
            })
        }else if(lis.productType == 2){
            activityForm.value.projectList.push({
                ...lis,
                projectName:lis.name
            })
        }else if(lis.productType == 1){
            activityForm.value.productList.push({
                ...lis,
                productName:lis.name
            })
        }
    })
    activityForm.value.cureList = uniqueFunc([...activityForm.value.cureList],'id');
    activityForm.value.comboList = uniqueFunc([...activityForm.value.comboList],'id');
    activityForm.value.projectList = uniqueFunc([...activityForm.value.projectList],'id');
    activityForm.value.productList = uniqueFunc([...activityForm.value.productList],'id');
    _getRangeList(1);
}
const importGoodsHandle = ()=>{
    importMemberRef.value.importFlag = true;
}
const submit = async ()=>{
    let params = {
        couponsName: form.value.name,
        couponsRemark: form.value.remark,
        releaseTotalNum:form.value.sendNum,
        discountsAmount: form.value.price,
        thresholdAmount: form.value.useThreshold==1?form.value.reachPrice:"",
        thresholdType: form.value.useThreshold,
        usingType: form.value.useTime,
        usingStartTime: form.value.useTimeValue[0],
        usingEndTime: form.value.useTimeValue[1],
        usingDay: form.value.useDay,
        businessScope: form.value.useStore,
        businessScopeData: [],
        activityScope: activityForm.value.rangeType,
        activityList: []
    }
    if(form.value.useStore == 1){
        params.businessScopeData = form.value.storeList.map(value=>{
            let storeFunctionType = [];
            if(value.isHall){
                storeFunctionType.push(1);
            }
            if(value.isShop){
                storeFunctionType.push(2);
            }
            return {
                storeId:value.id,
                storeFunctionType
            }
        })
    }
    if(activityForm.value.rangeType == 1 || activityForm.value.rangeType == 2){
        let cureIds = activityForm.value.cureList.map(value=>value.id);
        params.activityList.push({
            activityType:7,
            ids:cureIds
        })
        let comboIds = activityForm.value.comboList.map(value=>value.id);
        params.activityList.push({
            activityType:3,
            ids:comboIds
        })
        let projectIds = activityForm.value.projectList.map(value=>value.id);
        params.activityList.push({
            activityType:2,
            ids:projectIds
        })
        let productIds = activityForm.value.productList.map(value=>value.id);
        params.activityList.push({
            activityType:1,
            ids:productIds
        })
    }
    keepLoading.value = true;
    try{
        await addCoupons(params)
        ElMessage.success('新增成功');
        closeTag(route.name);
        router.replace({name:backValue.value});
    }catch(e){
    }finally{
        keepLoading.value = false;
    }
}
const priceRules = [
    {   
        required: true,
        validator: (rule, value, callback) => {
            if(!form.value.price) return callback(new Error('请输入优惠金额'));
            if(!form.value.useThreshold) return callback();
            if(form.value.reachPrice === '') return callback();
            if(+form.value.price >= +form.value.reachPrice){
                callback(new Error('优惠金额要小于门槛金额'));
            }else{
                callback();
            }
        },
        trigger: 'blur'
    }
]
const priceInput = (val)=>{
    form.value.price = limitFloat(val)
    form.value.reachPrice = new Big(limitFloat(val)).plus(0.00)
}
</script>
<template>
    <div class="page-contain">
        <TopBar :backValue="backValue" :tabName="tabName" ref="topbarRef">
            <template #operate>
                <el-button @click="prevHandle()" v-if="activeStep >= 1">上一步</el-button>

                <el-button type="primary" style="min-width: 68px" @click="nextHandle()" :loading="keepLoading">
                    <span v-if="activeStep == 0">下一步</span>
                    <span v-if="activeStep >= 1">保存</span>
                </el-button>
            </template>
        </TopBar>
        <div class="info-contain">
            <div class="stepBar-box">
                <div v-for="(item, index) in stepBarList" :key="item" @click="stepChange(index)"
                :class="`stepBar-item ${activeStep === index ? 'stepBar-activeItem' : ''}`">{{ item }}</div>
            </div>
            <div style="width:100%" v-show="activeStep == 0">
                <el-form :model="form" label-width="130px" :rules="rules" ref="formRef">
                    <div class="form-contain">
                        <el-form-item label="优惠券名称" :rules="getRules('input', '优惠券名称')" prop="name">
                            <el-input v-model="form.name" placeholder="请输入"  style="width:360px" show-word-limit :maxlength="20"/>
                        </el-form-item>
                        <el-form-item label="备注名称" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入，仅后台可见"  style="width:360px" show-word-limit :maxlength="20"/>
                        </el-form-item>
                        <el-form-item label="发放总量" prop="sendNum" :rules="getRules('input', '发放总量')">
                            <el-input v-model="form.sendNum" placeholder="请输入"  style="width:180px" @input="()=>{form.sendNum=limitInt(form.sendNum)}" @blur="()=>{form.sendNum=giveIntMin(form.sendNum)}" clearable/>
                            <span class="unit-class">张</span>
                        </el-form-item>
                        <el-form-item label="优惠金额" prop="price" :rules="priceRules">
                            <el-input v-model="form.price" placeholder="请输入"  style="width:180px" @input="priceInput" @blur="()=>{form.price=giveFloatMin(form.price)}" clearable/>
                            <span class="unit-class">元</span>
                        </el-form-item>
                        <el-form-item label="使用门槛" :rules="getRules('select', '使用门槛')" prop="useThreshold">
                            <el-radio-group v-model="form.useThreshold" @change="changeUseThreshold">
                                <el-radio :label="0">无门槛</el-radio>
                                <el-radio :label="1">
                                    <div class="inline-class">
                                        <span class="unit-class" style="margin-left:0">满</span>
                                        <el-form-item label="" label-width="0px" prop="reachPrice">
                                            <el-input :disabled="form.useThreshold == 0" placeholder="请输入" v-model="form.reachPrice" style="width:100px;margin:0 8px" @input="()=>{form.reachPrice=limitFloat(form.reachPrice)}" @blur="()=>{form.reachPrice=giveFloatMin(form.reachPrice)}" clearable></el-input>
                                        </el-form-item>
                                        <span class="unit-class" style="margin-left:0">元可用</span>
                                    </div>
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="使用时间" :rules="getRules('select', '使用时间')" prop="useTime">
                            <el-radio-group v-model="form.useTime" @change="changeUseTime">
                                <div class="inline-class" style="width:100%">
                                    <el-radio :label="0">
                                        <div class="inline-class">
                                            指定时间
                                            <el-form-item label="" label-width="0px" prop="useTimeValue">
                                                <el-date-picker :disabled="form.useTime == 1" style="margin-left:8px;" v-model="form.useTimeValue" type="datetimerange" start-placeholder="开始时间"
                                                end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                                                :disabled-date="disabledDate"/>
                                            </el-form-item>
                                        </div>
                                        
                                    </el-radio>
                                </div>
                                <div class="inline-class" style="width:100%;margin-top:16px">
                                    <el-radio :label="1">
                                        <div class="inline-class">
                                            <span class="unit-class" style="margin-left:0">领取后</span>
                                            <el-form-item label="" label-width="0px" prop="useDay">
                                                <el-input :disabled="form.useTime == 0" placeholder="请输入" v-model="form.useDay" style="width:100px;margin:0 8px" @input="()=>{form.useDay=limitInt(form.useDay,4)}" @blur="()=>{form.useDay=giveIntMin(form.useDay)}" clearable></el-input>
                                            </el-form-item>
                                            <span class="unit-class" style="margin-left:0">天内有效</span>
                                        </div>
                                    </el-radio>
                                </div>

                            </el-radio-group>
                        </el-form-item>
                        <!-- <el-form-item label="适用门店及业务" :rules="getRules('select', '适用门店及业务')" prop="useStore">
                            <el-radio-group v-model="form.useStore" @change="changeUseStore">
                                <el-radio :label="0">全部门店及业务</el-radio>
                                <el-radio :label="1">指定门店及业务</el-radio>
                            </el-radio-group>
                        </el-form-item> -->
                        <el-form-item label="选择门店" :rules="getRules('select', '选择门店')" prop="needValue" v-if="form.useStore == 1">
                            <el-button plain type="primary" @click="openStore()">
                                <img src="@/assets/icon/btn-add-blue.png" alt="" style="margin-right:8px;width:14px;height:14px">
                                选择门店
                            </el-button>
                            <div style="width:100%;padding-bottom:24px">
                            
                                <div style="width:500px;margin-top:8px" v-if="storeList && storeList.length>0">
                                    <el-table :data="storeList" style="width: 100%" stripe>
                                        <el-table-column prop="storeName" label="门店名称" width="200">
                                        </el-table-column>
                                        <!-- <el-table-column label="理疗馆">
                                            <template #default="{ row }">
                                                <span v-if="row.isHall">√</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="商城">
                                            <template #default="{ row }">
                                                <span v-if="row.isShop">√</span>
                                            </template>
                                        </el-table-column> -->
                                        <el-table-column label="操作" fixed="right" width="120">
                                            <template #default="{ row }">
                                                <el-button type="danger" plain size="small" @click="delStore(row.id)">
                                                    删除
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <div class="page">
                                        <el-pagination
                                            :current-page="storePageConfig.nowPage"
                                            :page-size="storePageConfig.pageSize"
                                            layout="prev, pager, next"
                                            :total="storePageConfig.totalPage"
                                            background
                                            @current-change="_getStoreLsit">
                                        </el-pagination>
                                    </div>
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <div style="width:100%" v-show="activeStep == 1">
                <el-form :model="activityForm" label-width="80px" :rules="activityRules" ref="activityRef">
                    <el-form-item label="活动范围" :rules="getRules('select', '活动范围')" prop="rangeType">
                        <el-radio-group v-model="activityForm.rangeType" @change="changeRange">
                            <el-radio :label="0">全部商品可用</el-radio>
                            <el-radio :label="1">指定商品可用</el-radio>
                            <el-radio :label="2">指定商品不可用</el-radio>
                        </el-radio-group>
                        <div style="width:100%;margin-top:5px" v-if="activityForm.rangeType != 0">
                            <el-button plain type="primary" @click="openRangeList()">
                                <img src="@/assets/icon/btn-add-blue.png" alt="" style="margin-right:8px;width:14px;height:14px">
                                选择商品
                            </el-button>
                            <el-button plain type="success" @click="importGoodsHandle()">
                                <img src="@/assets/images/green-import.png" alt="" style="margin-right:8px;width:14px;height:14px">
                                导入商品
                            </el-button>
                        </div>
                        <div style="width:100%;margin-top:10px" v-if="activityForm.rangeType != 0">
                            <el-radio-group v-model="groupType" @change="groupTypeChange">
                                <!-- <el-radio-button label="疗程" /> -->
                                <el-radio-button label="套餐" />
                                <el-radio-button label="项目" />
                                <el-radio-button label="产品" />
                            </el-radio-group>
                        </div>
                        <div style="width:500px;margin-top:8px" v-if="rangeList && rangeList.length>0">
                            <el-table :data="rangeList" style="width: 100%" stripe v-if="groupType == '疗程'">
                                <el-table-column prop="courseName" label="疗程名称" width="350">

                                </el-table-column>
                                <el-table-column label="操作" fixed="right" width="120">
                                    <template #default="{ row }">
                                        <el-button type="danger" plain size="small" @click="delRange(row.id)">
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-table :data="rangeList" style="width: 100%" stripe v-if="groupType == '套餐'">
                                <el-table-column prop="comboName" label="套餐名称" width="350">
                                </el-table-column>
                                <el-table-column label="操作" fixed="right" width="120">
                                    <template #default="{ row }">
                                        <el-button type="danger" plain size="small" @click="delRange(row.id)">
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-table :data="rangeList" style="width: 100%" stripe v-if="groupType == '项目'">
                                <el-table-column prop="projectName" label="项目名称" width="350">
                                </el-table-column>
                                <el-table-column label="操作" fixed="right" width="120">
                                    <template #default="{ row }">
                                        <el-button type="danger" plain size="small" @click="delRange(row.id)">
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-table :data="rangeList" style="width: 100%" stripe v-if="groupType == '产品'">
                                <el-table-column prop="productName" label="产品名称" width="350">
                                </el-table-column>
                                <el-table-column label="操作" fixed="right" width="120">
                                    <template #default="{ row }">
                                        <el-button type="danger" plain size="small" @click="delRange(row.id)">
                                            删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="page">
                                <el-pagination
                                    :current-page="rangePageConfig.nowPage"
                                    :page-size="rangePageConfig.pageSize"
                                    layout="prev, pager, next"
                                    :total="rangePageConfig.totalPage"
                                    background
                                    @current-change="_getRangeList">
                                </el-pagination>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>

            </div>
        </div>
    </div>
    <SelectStote @backStoreValue="backStoreValue" ref="selectStoteRef"></SelectStote>
    <SelectRange :groupTypeList=" ['套餐','项目','产品']" ref="selectRangeRef" @backRangeValue="backRangeValue"></SelectRange>
    <ImportMember ref="importMemberRef" @backImportRangeValue="backImportRangeValue"></ImportMember>
</template>
<style lang="less" scoped>
.page{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  margin-top:8px;
}
:deep(.el-table__inner-wrapper::before){
    display:none;
}
:deep(.el-table th.el-table__cell){
    background: #EBEBEB;
}

:deep(.el-table__header){
    tr{
        th{
            &:last-child{
                .cell{
                    border-right: 0px;
                }
            }
        }
    }
}
.inline-class{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.unit-class{
    font-size: 14px;
    color: #000000;
    font-weight: 400;
    line-height: 32px;
    margin-left:8px;
}
.form-contain{
    width: 100%;
    margin-top:16px;
}
.page-contain{
    width: 100%;
    height: 100%;
}
.info-contain{
    width: 100%;
    height: calc(100% - 48px);
    box-sizing: border-box;
    padding:16px 24px;

}
.stepBar-box {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;

  .stepBar-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -16px;
    width: 306px;
    height: 40px;
    color: #000;
    font-size: 16px;
    -webkit-clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
    clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
    background: #EBF2FF;
    cursor: pointer;
  }

  .stepBar-activeItem {
    color: #fff;
    background: #3480FF;
  }

  .stepBar-item:first-of-type {
    margin-left: 0;
    -webkit-clip-path: polygon(0% 0%, 95% 0, 100% 50%, 95% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 95% 0, 100% 50%, 95% 100%, 0% 100%);
  }
}
:deep(.el-radio-button:first-child .el-radio-button__inner) {
  border-left: 1px solid #3480FF;
}
</style>